<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/reset1.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/indexseo.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/style3.css" />
<script src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js" ></script>

<script src="${pageContext.request.contextPath }/js/slider.js"></script>
<script src="${pageContext.request.contextPath }/js/navChange.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js" ></script>
<!--表单校验-->
<script type="text/javascript">
		
		//自定义表单校验
		//自定义校验规则
	$.validator.addMethod(
		//规则的名称
		"checkUsername",
		//校验的函数
		function(value,element,params){
			
			//定义一个标志
			var flag = false;
			
			//value:输入的内容
			//element:被校验的元素对象
			//params：规则对应的参数值
			//目的：对输入的username进行ajax校验
			$.ajax({
				"async":false,
				"url":"<%=basePath%>checkUsername.html",
				"data":{"username":value},
				"type":"POST",
				"dataType":"json",
				"success":function(data){
					flag = data;
				}
			});
			
			
			//返回false代表该校验器不通过
			return !flag;
		}
		
	);
		//自定义表单校验
        $.validator.addMethod("isPhone", function(value, element) {
          var length = value.length;
          var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
          return this.optional(element) || (length == 11 && mobile.test(value));
         }, "请填写正确的手机号码");
         /*表单校验*/
	$(function () {
				$("#registerForm").validate({
					rules:{
						username:{
							required:true,
							minlength:6,
							checkUsername:true
							/*username:true*/
						},
						password:{
							required:true,
							minlength:6
						},
						repassword:{
							required:true,
							equalTo:"#password"
						},
						tel:{
							isPhone:true
						},
						email:{
							email:true
						},
						address:{
							required:true
						}
					},
					messages:{
						username:{
							required:"必填字段",
							minlength:"不能少于6个字段",
							checkUsername:"用户名已存在"
						},
						password:{
							required:"密码不能为空",
							minlength:"最多不能少于6个字"
						},
						repassword:{
							required:"不能为空",
							equalTo:"前后两次密码不一致"
						},
						tel:{
							isPhone:"请填写正确的手机号码"
						},
						email:{
							email:"请输入正确的邮箱格式"
						},
						address:{
							required:"必选字段"
						}
					}
				});
			});
</script>
<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}

.container .row div {
	/* position:relative;
				 float:left; */	
}

font {
	color: #666;
	font-size: 22px;
	font-weight: normal;
	padding-right: 17px;
	
  /* Make the image fully responsive */
.carousel-inner img {
     width: 100%;
     height: 100%;
}
</style>
</head>
<body style="overflow-x:hidden">

	<jsp:include page="/WEB-INF/jsp/head.jsp"></jsp:include>
		
		<div class="container" style="background: url(${pageContext.request.contextPath }/img/registerbg.jpg);background-size: cover; width: 100%;height:700px;">
			<div class="container-fluid" style="padding-left: 300px;">
				<div class="row" style="padding-top: 10px;padding-bottom: 30px;">
					<div class="col-md-2" ></div>
					<div class="col-md-8" style="background: #fff; border: 7px solid #ccc; width: 600px; height: auto;padding-top: 20px;">
									<font style="padding-left: 50px;">用户注册</font>USER REGISTER
									<!--注册表单-->
								 <form class="form-horizontal" style="margin-top: 5px;" role="form" id="registerForm" action="" method="post">
										<div class="form-group">
											<label for="username" class="col-sm-2 control-label">账号:</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="username" name="username" style="width: 150px;" placeholder="请输入名字"><span style="color:Red;font-size:12px"></span>
											</div>
										</div>
										<div class="form-group">
											<label for="password" class="col-sm-2 control-label">密码</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" id="password" name="password" style="width: 150px;" placeholder="请输入密码">
											</div>
										</div>
										
										<div class="form-group">
											<label for="repassword" class="col-sm-2 control-label">确认密码</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" id="repassword" name="repassword" style="width: 150px;" placeholder="请再次输入密码">
											</div>
										</div>
										
										<div class="form-group">
											<label for="tel" class="col-sm-2 control-label">手机号码</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="tel" name="tel" style="width: 150px;" placeholder="请输入手机号码">
											</div>
										</div>
										
										<div class="form-group">
											<label for="email" class="col-sm-2 control-label">邮箱</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="email" name="email" style="width: 150px;" placeholder="请输入邮箱">
											</div>
										</div>
										
										<div class="form-group">
											<label for="address" class="col-sm-2 control-label">住址</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="address" name="address" style="width: 150px;" placeholder="请输入地址">
											</div>
										</div>
										
										<div class="form-group">
												<div class="col-sm-offset-2 col-sm-4">
													<a href="${pageContext.request.contextPath }/login.html">已有账号?马上登录</a>
												  </div>
												</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-default" onclick="register()">注册</button>
											</div>
										</div>
									</form>
							</div>
					<div class="col-md-2" ></div>
				</div>
			</div>
		</div>

		<div class="" style="margin: auto;"></div>
		<!--底层-->
		<nav class="navbar-fixed-bottom">
			<header class="header" style="background-color: gainsboro">
		      <div class="container1">
		      	
		        <ul class="nav" style="padding-top: 5px;">
		          <li class="nav" style="display: inline;">
		            <p>CopyRight@201624131105</p>
		          </li>
		        </ul>
		        
		      </div>
		    </header>
		    </nav>
<script type="text/javascript">
//注册
function register() {
	
	 var flag = $("#registerForm").valid();
	    if(!flag){
	        //没有通过验证
	        return;
	    }
	$.post(
			"<%=basePath%>registerin.html",
			$("#registerForm").serialize(),
			function (data) {
				alert("注册成功!跳转登录界面!");
				location.href="<%=basePath%>login.html"
			}
			);
}
</script>
</body>
</html>